<template>
	<!-- 顶部导航 -->
	<u-navbar :fixed="true" title="悅研囯商" :border-bottom="false"
	          :safeAreaInsetTop="true">
	</u-navbar>
  <view class="qs-container">
    <view>
        <view class="qs-single">
          <view class="questions">
            <view v-if="pageNum === 1">
              <view class="question" >
			    <text class="question-title">1.你的本科院校是？ *</text>
				<view @click="showbkyx = true" style="padding: 10px;cursor: pointer;">{{ answer.bkyx }} </view>
              </view>
			  <view class="question" style="margin-top: 40px;">
			    <text class="question-title">2.你的本科专业是？ *</text>
			  		<input v-model="answer.bkzy" class="question-input"/>
			  </view>
			  <view class="question" style="margin-top: 40px;">
			    <text class="question-title">3.你本科的辅修（双学位）专业为？</text>
			  		<input v-model="answer.fxzy" class="question-input"/>
			  </view>
			  <view class="question" style="margin-top: 40px;">
			    <text class="question-title">4.目标院校所在城市是？（多选）*</text>
			  		<input v-model="answer.mbcs" class="question-input"/>
			  </view>
			  <view class="question" style="margin-top: 40px;">
			    <text class="question-title">5.目标专业与学校是？*</text>
			  		<input v-model="answer.mbzyyxx" class="question-input"/>
			  </view>
            </view>
            <view v-if="pageNum === 2">
              <view class="question" >
			    <text class="question-title">6.是否能每天坚持学习? *</text>
				<up-radio-group
						v-model="answer.jcxx"
						placement="column"
					>
						<up-radio
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in radiolist1"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-radio>
					</up-radio-group>
              </view>
			  <view class="question" style="margin-top: 40px;">
			    <text class="question-title">7.你预估的每日平均备考时长为 *</text>
					<up-radio-group
							v-model="answer.bksc"
							placement="column"
						>
							<up-radio
								:customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in radiolist2"
								:key="index"
								:label="item.name"
								:name="item.name"
							>
							</up-radio>
						</up-radio-group>
			  </view>
			  <view class="question" style="margin-top: 40px;">
			    <text class="question-title">8.你预估的备考周期有多久 *</text>
					<up-radio-group
							v-model="answer.bkzq"
							placement="column"
						>
							<up-radio
								:customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in radiolist3"
								:key="index"
								:label="item.name"
								:name="item.name"
							>
							</up-radio>
						</up-radio-group>
			  </view>
              </view>
            </view>
          </view>
        </view>
		<view v-if="pageNum === 1" style="width: 90%;margin: 0 auto;">
			<up-button type="primary" text="下一页" @click="next1"></up-button>
		</view>
			<view v-if="pageNum === 2" style="width: 90%; margin: 0 auto; display: flex;justify-content: space-between; align-items: center;">
			    <up-button type="info" text="上一步" @click="pageNum=1" style="margin-right: 5px;"></up-button>
			    <up-button type="primary" text="下一步" @click="next2" style="margin-left: 5px;"></up-button>
			</view>
		<up-toast ref="uToastRef"></up-toast>
		<!-- picker选择器 -->
		<up-picker
			v-model="answer.bkyx"
			:show="showbkyx"
			:columns="collegeList"
			title="请选择目标院校"
			@confirm="confirm"
			@cancel="showbkyx = false"
		></up-picker>
    </view>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
	  pageNum:1,
	  show: false,
	  answer:{
		  bkyx:'',
		  bkzy:'',
		  fxzy:'',
		  mbcs:'',
		  mbzyyxx:'',
	  },
	  // visible
	  showbkyx:false,
	  // 学校数据
	  collegeList:  [['清华大学','北京大学']],
	  // 是否每天坚持学习
	  radiolist1: [{
	  			name: '是',
	  			disabled: false
	  		},
	  		{
	  			name: '否',
	  			disabled: false
	  		},
	  		{
	  			name: '不确定',
	  			disabled: false
	  		}
	  	],
	  //你预估的每日平均备考时长为
	  radiolist2: [{
	  			name: '6小时以下',
	  			disabled: false
	  		},
	  		{
	  			name: '6-8小时',
	  			disabled: false
	  		},
	  		{
	  			name: '8小时以上',
	  			disabled: false
	  		},
	  		{
	  			name: '不确定',
	  			disabled: false
	  		}
	  	],
		//你预估的备考周期有多久
		radiolist3: [{
					name: '3个月内',
					disabled: false
				},
				{
					name: '3-6个月',
					disabled: false
				},
				{
					name: '6-9个月',
					disabled: false
				},
				{
					name: '9-12个月',
					disabled: false
				},
				{
					name: '12个月以上',
					disabled: false
				},
				{
					name: '不确定',
					disabled: false
				}
			],
	  // 提示信息
	  params:{
			type: 'default',
			title: '提示信息',
			message: "有必选项未勾选!",
		}
    };
  },
  methods: {
    commit() {
      // 提交逻辑
      console.log('提交数据');
    },
    checkSingle(detail) {
      // 校验逻辑
    },
	confirm(e) {
		this.showbkyx = false
		this.answer.bkyx = e.value[0]
	},
	next1(){
		if(this.answer.bkyx == ''){
			this.params.message = "问题1未回答！"
			this.showToast()
		}else if(this.answer.bkzy == ''){
			this.params.message = "问题2未回答！"
			this.showToast()
		}else if(this.answer.mbcs == ''){
			this.params.message = "问题4未回答！"
			this.showToast()
		}else if(this.answer.mbzyyxxv == ''){
			this.params.message = "问题5未回答！"
			this.showToast()
		}else{
			this.pageNum = 2
			console.log(this.answer.mbzyyxxv == '')
			console.log(this.answer)
		}
	},
	next2(){
		if(this.answer.jcxx == ''){
			this.params.message = "问题6未回答！"
			this.showToast()
		}else if(this.answer.bksc == ''){
			this.params.message = "问题7未回答！"
			this.showToast()
		}else if(this.answer.bkzq == ''){
			this.params.message = "问题4未回答！"
			this.showToast()
		}else{
			const jsonString = JSON.stringify(this.answer);
			console.log(jsonString);
		}
	},
	showToast() {
			this.$refs.uToastRef.show({
				...this.params,
				overlay: true,
			})
		},
  },
};
</script>

<style scoped>
.qs-container {
  margin-top: 50px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qs-single {
  margin: 20px 0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.questions {
  margin-bottom: 20px;
}

.question {
  margin:0px 15px;
  padding: 0 2%;
}

.question-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.required {
  color: red;
  margin-left: 5px;
}

.question-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s;
}

.question-input:focus {
  border-color: #007bff;
  outline: none;
}

.qs-single__bottom {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}
</style>
